<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <text class="title">About</text>
    </view>

    <scroll-view scroll-y class="content">
      <!-- App Info Section -->
      <view class="section app-info">
        <image 
          class="app-logo"
          src="/static/images/logo.png"
          mode="aspectFit"
        ></image>
        <text class="app-name">School App</text>
        <text class="app-version">Version 1.0.0</text>
        <text class="app-description">
          Your comprehensive study companion for better learning and organization.
        </text>
      </view>

      <!-- Features Section -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Key Features</text>
        </view>
        <view class="features-list">
          <view class="feature-item">
            <u-icon name="calendar" size="32" color="#4b7bec"></u-icon>
            <text class="feature-title">Smart Calendar</text>
            <text class="feature-desc">Organize your study schedule efficiently</text>
          </view>
          <view class="feature-item">
            <u-icon name="file-text" size="32" color="#4b7bec"></u-icon>
            <text class="feature-title">Study Notes</text>
            <text class="feature-desc">Take and organize notes seamlessly</text>
          </view>
          <view class="feature-item">
            <u-icon name="chart" size="32" color="#4b7bec"></u-icon>
            <text class="feature-title">Progress Tracking</text>
            <text class="feature-desc">Monitor your learning progress</text>
          </view>
          <view class="feature-item">
            <u-icon name="bell" size="32" color="#4b7bec"></u-icon>
            <text class="feature-title">Smart Reminders</text>
            <text class="feature-desc">Never miss important deadlines</text>
          </view>
        </view>
      </view>

      <!-- Developer Info -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Developer</text>
        </view>
        <view class="developer-info">
          <image 
            class="developer-avatar"
            src="/static/images/developer.png"
            mode="aspectFill"
          ></image>
          <text class="developer-name">Your Name</text>
          <text class="developer-role">Lead Developer</text>
          <view class="social-links">
            <u-button 
              type="primary"
              icon="globe"
              size="mini"
              @click="openWebsite"
            >Website</u-button>
            <u-button 
              type="info"
              icon="github"
              size="mini"
              @click="openGithub"
            >GitHub</u-button>
          </view>
        </view>
      </view>

      <!-- Contact Section -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Contact &amp; Support</text>
        </view>
        <view class="contact-list">
          <view class="contact-item" @click="sendEmail">
            <u-icon name="mail" size="24"></u-icon>
            <text>support@schoolapp.com</text>
          </view>
          <view class="contact-item" @click="openTwitter">
            <u-icon name="twitter" size="24"></u-icon>
            <text>@SchoolApp</text>
          </view>
          <view class="contact-item" @click="openDiscord">
            <u-icon name="message-circle" size="24"></u-icon>
            <text>Join our Discord Community</text>
          </view>
        </view>
      </view>

      <!-- Legal Section -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Legal</text>
        </view>
        <view class="legal-links">
          <text class="link" @click="openPrivacyPolicy">Privacy Policy</text>
          <text class="link" @click="openTerms">Terms of Service</text>
          <text class="link" @click="openLicenses">Open Source Licenses</text>
        </view>
      </view>

      <!-- Copyright -->
      <view class="copyright">
        <text>© 2024 School App. All rights reserved.</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  methods: {
    openWebsite() {
      // Implement website opening logic
      uni.showToast({
        title: 'Opening website...',
        icon: 'none'
      })
    },
    openGithub() {
      // Implement GitHub opening logic
      uni.showToast({
        title: 'Opening GitHub...',
        icon: 'none'
      })
    },
    sendEmail() {
      // Implement email sending logic
      uni.showToast({
        title: 'Opening email client...',
        icon: 'none'
      })
    },
    openTwitter() {
      // Implement Twitter opening logic
      uni.showToast({
        title: 'Opening Twitter...',
        icon: 'none'
      })
    },
    openDiscord() {
      // Implement Discord opening logic
      uni.showToast({
        title: 'Opening Discord...',
        icon: 'none'
      })
    },
    openPrivacyPolicy() {
      uni.navigateTo({
        url: '/pages/more/legal/privacy-policy'
      })
    },
    openTerms() {
      uni.navigateTo({
        url: '/pages/more/legal/terms'
      })
    },
    openLicenses() {
      uni.navigateTo({
        url: '/pages/more/legal/licenses'
      })
    }
  }
}
</script>

<style scoped>
.container {
  flex: 1;
  background-color: #f8f9fa;
}

.header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.content {
  flex: 1;
  padding-top: 20rpx;
}

.section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.app-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40rpx 20rpx;
}

.app-logo {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.app-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.app-version {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.app-description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  max-width: 600rpx;
}

.section-header {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.features-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20rpx;
}

.feature-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin: 10rpx 0;
}

.feature-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
}

.developer-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20rpx;
}

.developer-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-bottom: 20rpx;
}

.developer-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.developer-role {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.social-links {
  display: flex;
  gap: 20rpx;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.legal-links {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.link {
  font-size: 28rpx;
  color: #4b7bec;
  text-decoration: underline;
}

.copyright {
  text-align: center;
  padding: 40rpx 20rpx;
  font-size: 24rpx;
  color: #999;
}
</style> 